@import '../../theme/style/variables.module.less';

.container {
    .flex(center, flex-start);
    flex-wrap: nowrap;
    white-space: nowrap;
    .transition();
    width: 100%;
    .properties(height, @mi-menu-item-height);
    position: relative;
    min-width: unset;

    &.collapsed {
        .flex();
    }

    .icon {
        .properties(margin-right, 12);
        .transition();

        :global(.anticon) {
            color: var(--mi-menu-item-title-icon);
            .transition();
        }

        &.collapsed {
            margin-right: 0;
            .properties(width, 20);
    
            :global(.anticon) {
                .font-size(20);
                .properties(width, 20);
                .flex();
            }
        }
    }

    &.fold,
    &.active,
    &.collapsed-active {
        .title {
            color: var(--mi-menu-item-title-active-text);
            font-weight: bold;

            &-sub {
                color: var(--mi-menu-item-title-active-sub);
            }
        }

        .icon {
            :global(.anticon) {
                color: var(--mi-menu-item-title-active-icon);
            }
        }
    }
}

.title {
    .flex(flex-start, center, column);
    .properties(height, @mi-menu-item-height);
    .font-size(14);
    .properties(line-height, 20);
    color: var(--mi-menu-item-title-text);
    .transition();

    &-sub {
        .font-size(12);
        color: var(--mi-menu-item-title-sub);
    }
}

.tag {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    .ellipsis();
    width: auto;
    .flex();
    .properties(max-width, @mi-gap * 8);
    .transition();
    margin-inline-end: 0;
}

:export {
    --menu-item-title-text: var(--mi-on-background);
    --menu-item-title-sub: rgba(var(--mi-rgb-on-background), .5);
    --menu-item-title-icon: var(--mi-on-background);
    --menu-item-title-active-text: var(--mi-on-primary);
    --menu-item-title-active-sub: rgba(var(--mi-rgb-on-primary), .6);
    --menu-item-title-active-icon: var(--mi-on-primary);
}